<template>
  <el-container class="main">
    <!--头部区域-->
    <el-header>
      <div>
        <router-link to="/" class="logo-title">&nbsp;&nbsp;demo222后台管理系统</router-link>
      </div>
      <el-dropdown>
        <span class="el-dropdown-link">
          {{ state.userName }}
          <el-icon class="el-icon--right"><arrow-down/></el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click.native="loginOut">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </el-header>

    <!--页面主体区域-->
    <el-container>
      <!--侧边栏-->
      <!-- 用户管理、订单管理 -->
      <el-aside style="width: 200px">
        <el-menu text-color="#008390" active-text-color="#008390" class="el-menu-vertical-demo">
          <router-link class="router-link-active" to="/user">
            <el-menu-item index="1">
                <template #title>
                <i class="el-icon-user" style="color: #008390"></i>
                <span slot="title">用户管理</span>
              </template>
            </el-menu-item>
          </router-link>

          <router-link class="router-link-active" to="/">
            <el-menu-item index="2">
              <template #title>
                <i class="el-icon-date" style="color: #008390"></i>
                <span slot="title">订单管理</span>
              </template>
            </el-menu-item>
          </router-link>
        </el-menu>
      </el-aside>

      <!--右侧内容主体-->
      <el-main style="background-color: white">
        <router-view></router-view>
      </el-main>

    </el-container>
  </el-container>
</template>

<script setup lang="ts">
import {reactive} from 'vue';
import {useRouter} from 'vue-router';
import {ArrowDown} from "@element-plus/icons-vue";
// 变量
const state = reactive({
  userName: "管理员"
})
const router = useRouter()

//退出登录
function loginOut() {
  localStorage.clear()
  router.push("/login")
}
</script>

<style>
@import "../assets/css/Index.css";
</style>